<template>
  <div class="home-index">
    <container title="推荐资讯" sub-title="RECOMMEND" :show-more="true" :more-href="moreHref">
      <div class='fl'>
        <el-carousel style="height: 367px;width:500px" indicator-position="none">
          <el-carousel-item v-for="item in firstSlider" :key="item.dataId" style="height: 367px;" >
            <router-link :to="geneDetailRoute(item.dataId)">
              <div class="relative" style="height: 367px;">
                <img :src="item.img_url" :alt="item.name" :title="item.name" class='zongyiMainImg'>
                <span class="newDate absolute">
                {{ item.name}}
          </span>
              </div>
            </router-link>
          </el-carousel-item>
        </el-carousel>

      </div>
      <div class='fr zongyiRight'>
        <text-list class='zongyiList' :data="getSliderSubData(0, 3)" />
        <card-list class='clearfix zongyiImgList' :data="getSliderSubData(0, 5)"/>
      </div>
    </container>
    <container title="最新资讯" sub-title="INFORMATION" :show-more="true" :more-href="moreHref">

      <div class="part part1 fl">

        <router-link :to="geneDetailRoute(firstItems.dataId)">
          <img :src="firstItems.img_url" :alt="firstItems.name" :title="firstItems.name">
        </router-link>
        <pure-list :data="getListSubData(10, 14)" />
      </div>
      <div class="part part2 fl">
        <div
          class="subTitle ellipsis"
          :title='firstItem.name'
        >
          <router-link :to="geneDetailRoute(firstItem.dataId)">
            {{firstItem.name || ''}}
          </router-link>
        </div>
        <pure-list class='top_part' :data="getListSubData(1, 7)" />
        <card-list class='clearfix mid_part' :data="getListSubData(8, 9)" />
      </div>
      <div class="part part3 fl">
        <text-card-list :data="getListSubData(15, 18)" />
      </div>
    </container>
  </div>
</template>

<script>
  import Container from '@/components/common/Container'
  import TextList from '@/components/list/TextList'
  import CardList from '@/components/list/CardList'
  import TextCardList from '@/components/list/TextCardList'
  import PureList from '@/components/list/PureList'

  import dateFormater from '@/assets/js/basic/dateFormatUtil'
  import {geneDetailRoute, fieldState} from "@/mixins"

  // 请求后台api接口
  import * as _homeApi from '@/api/homeRequest'
  import Vue from 'vue';
  import { Carousel, CarouselItem } from 'element-ui';
  import 'element-ui/lib/theme-chalk/index.css';
  Vue.component(Carousel.name, Carousel);
  Vue.component(CarouselItem.name, CarouselItem);


  export default {
    name: "homeIndex",
    mixins: [geneDetailRoute, {methods: fieldState.methods}],
    props: {
      field: String
    },
    data() {
      return {
        sliderData: [],
        listData: [],
        firstData: []
      }
    },
    computed: {
      firstItem() {
        const vm = this;
        let item = {};
        if (vm.listData.length > 0) {
          item = vm.listData[0].item || {};
        }
        return item;
      },
      firstItems() {
        const vm = this;
        let item = {};
        if (vm.firstData.length > 0) {
          item = vm.firstData[0].item || {};
        }
        return item;
      },
      firstSlider() {
        const vm = this;
        let item = {};
        if (vm.sliderData.length > 0) {
          item = vm.sliderData;
        }
        return item;
      },
      moreHref() {
        const vm = this;
        return vm.$router.resolve({name: 'listPage', params: {field: vm.field}}).href;
      }
    },
    watch: {
      field() {
        const vm = this;
        vm.fetchData();
        vm.commitField();
      }
    },
    methods: {
      /**
       * 从后台获取数据
       */
      fetchData() {
        const vm = this;
        _homeApi.fetchSlider(vm.field, { pageSize: 10 }).then(res => {
          vm.sliderData = res.data.items || [];
        });
        _homeApi.fetchList(vm.field, { pageSize: 20 }).then(res => {
          vm.listData = res.data.items || [];
        });
        _homeApi.fetchFirsItem(vm.field, { pageSize: 1 }).then(res => {
          vm.firstData = res.data.items || [];
        });

      },

      /**
       * 获取列表数据子数据
       * @param from
       * @param to
       * @returns {Array}
       */
      getListSubData(from = 0, to) {
        const listData = this.listData;
        if (typeof to !== 'number') {
          to = listData.length - 1;
        }
        let list = [];
        for (let i = from; i <= to && i < listData.length; i++) {
          list.push(listData[i].item);
        }
        return list;
      },
      /**
       * 获取Slider数据子数据
       * @param from
       * @param to
       * @returns {Array}
       */
      getSliderSubData(from = 0, to) {
        const sliderData = this.sliderData;
        if (typeof to !== 'number') {
          to = sliderData.length - 1;
        }
        let list = [];
        for (let i = from; i <= to && i < sliderData.length; i++) {
          list.push(sliderData[i]);
        }
        return list;
      },
    },
    filters: {
      fomatDate (time, fomat = 'yyyy-MM-dd') {
        let date = new Date(time);
        if (date.getTime() !== time) {
          return '';
        }
        return dateFormater.format(date, fomat);
      }
    },
    created() {
      const vm = this;
      vm.commitField();
      vm.fetchData();
    },
    components: {
      Container,
      TextList,
      TextCardList,
      PureList,
      CardList
    }
  }
</script>
<style scoped>
  .part1 img {
    width: 330px;
    height: 236px;
    display: inline-block;
  }
  .zongyiMainImg {
    width: 100%;
    height: 100%;
    display: inline-block;
  }
  .newDate{
    width: 100%;
    height: 42px;
    line-height: 42px;
    padding-left: 10px;
    padding-right: 10px;
    color: #ffffff;
    background-color: rgba(0,0,0,0.5);
    bottom: 0;
    left: 0;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
</style>
